<!-- 
    组件： 是vue.js最强大的功能之一,而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。针对不同的使用场景，如何选择有效的通信方式？

    一、父子通信
    1. 父组件向子组件传值 
       父组件在调用子组件的地方添加一个自定义的属性,属性值就是传递给子组件的值,如果属性值是一个变量/boolean/number , 需要使用绑定属性(v-bind:属性=属性值, 缩写是 :属性= 属性值)
       子组件通过props来获取数据
    2. 子组件向父组件传值
       在子组件的某个事件的内部,通过 this.$emit(自定义的事件名,data) 传值
       父组件中：在调用子组件的地方 @子组件中自定义的事件名="getDada"
                在methods：{getData(val){ // val中存储的就是子组件传给父组件的值 }}
    3. 子组件直接使用父组件的数据
       子组件直接通过 this.$parent.属性名 来使用父组件的数据
       子组件直接通过 this.$parent.方法名() 来使用父组件的方法
    4.父组件直接使用子组件的数据
       父组件在调用子组件的地方加一个ref="aaa", 父组件中再自定义一个方法来获取子组件的数据.
       在这个自定义方法中通过 this.$refs.aaa.子组件中想要拿到数据的属性名
    二、非父子组件通信
       使用 中央事件总线eventBus ---  在vue中可以使用它作为沟通桥梁，就是所有组件共用同一个事件中心。可以向该事件中心发送事件，也可以从该事件中心获取事件。
       步骤：1) const bus = new Vue()  --- 创建事件总线
            2) 需要接收数据的一方通过bus.$on('自定义的事件名',回调函数(val)=>{}) 先监听
            3) 需要传输数据的一方通过 bus.$emit('自定义的事件名',参数) 来传输
            4) 需要移除事件监听： bus.$off('自定义的事件名',回调函数)
       缺点：
           eventBus方式数据不支持响应式，当项目较大时，维护起来很困难
           这种方式只适合写demo,不适合我们做大型项目,因为要随时监听,代码量太多
    三、内层组件直接获取祖先组件的数据
       就是在跨级组件之间建立一种主动提供与依赖注入的关系来解决跨级组件之间的通信问题。
       祖先组件中 ： 提供数据和方法
        provide:{
            money: 15000, // 不能写 this.money
            fn(){
                console.log('祖先组件中的函数')
            } 
        }
       子组件中： inject:['money','fn']
           此时：子组件中就可以直接使用数据和调用方法了 eg: {{money}} @click="fn"
       优点: 通过 provide /inject方法：不论子组件嵌套有多深，都可以获取到跨级组件中的数据和方法
       缺点：      provide /inject方法 不支持响应式。
    四、$root、$parent、$refs 的用法
       1) $root: vue子组件可以通过$root属性获取vue的根实例，比如在简单的项目中将公共数据放在vue根实例上(可以理解为一个全局store), 因此可以代替vuex实现状态管理。
       2) $parent: 可以用来子组件直接访问父组件实例，可以替代父组件将数据以prop的形式传给子组件。
          缺点：当变更父级组件数据时，容易造成调试和理解难度增加。
       3) $refs: 可以用来父组件直接访问子组件的实例。可以替代$emit的作用。
         注意：$refs只会在组件渲染完成之后生效，并且不是响应式的。
              仅仅作为一个直接操作子组件的 "逃生舱"。应该避免在模板语法 和 计算属性中访问$refs。
       4) root 和 parent 的区别
          区别在于：如果存在多级子组件，通过parent访问到的是它最近一级的父组件，通过root访问到的是根父组件。
                   所有子组件都可以将这个根实例作为一个全局store来访问和使用。
 -->